<!-- 忘记密码 -->
<template>
	<view class="container d-flex">
		<view class="head relative d-flex mb-60">
			<image src="/static/logo.svg" mode="widthFix" class="logo absolute"></image>
			
			<view class="head_content d-flex pl-100">
				<text class="head_title">数据精灵</text>
				<text class="head_jg ml-20 mr-20">|</text>
				<text class="head_describe relative">真诚，是一种态度</text>
			</view>
		</view>
		
		<text class="descripe mb-60">只需一个数据精灵账号，即可访问数据精灵的所有服务</text>
		
		<uv-form ref="form" :model="ruleForm" :rules="rules" label-width="0">
			<uv-form-item class="mb-20" prop="mobile" :borderBottom="false">
				<uv-input v-model="ruleForm.mobile" border="none" placeholder="请输入手机号">
					<template #prefix>
						<Icon name="phone-fill" size="40rpx" />
					</template>
				</uv-input>
			</uv-form-item>
			
			<uv-form-item class="mb-20 code" prop="verificationcode" :borderBottom="false">
				<uv-input v-model="ruleForm.verificationcode" border="none" placeholder="请输入6位验证码" maxlength="6">
					<template #prefix>
						<Icon name="empty-permission" size="40rpx" />
					</template>
					
					<template #suffix>
						<Code class="sendCode" :value="ruleForm.mobile" color="#404040" :isFun="true" @onSend="onSend" :type="1" />
					</template>
				</uv-input>
			</uv-form-item>
			
			<uv-form-item class="mb-20" prop="password" :borderBottom="false">
				<uv-input v-model="ruleForm.password" border="none" placeholder="请输入密码" type="password">
					<template #prefix>
						<Icon name="empty-permission" size="40rpx" />
					</template>
				</uv-input>
			</uv-form-item>
			
			<uv-form-item class="mb-20" prop="confirmPass" :borderBottom="false">
				<uv-input v-model="ruleForm.confirmPass" border="none" placeholder="请再次输入密码" type="password">
					<template #prefix>
						<Icon name="empty-permission" size="40rpx" />
					</template>
				</uv-input>
			</uv-form-item>
			
			<view class="footer mb-30">
				<uv-button class="submit" @tap="submit">修改</uv-button>
			</view>
			
			<view class="handle d-flex mb-30">
				<navigator class="handle_btn activeText" url="/pages/Login/index">立即登录</navigator>
				<navigator class="handle_btn activeText" url="/pages/Register/index">立即注册</navigator>
			</view>
			
		</uv-form>
		
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import Icon from '@/components/Icon/index.vue'
import Code from '@/components/Code/index.vue'
import { valiteMobile } from '@/utils/format'
import { SetUserPassword } from '@/api/user'

const form = ref(null)

const ruleForm = reactive({
	mobile: '',
	password: '',
	confirmPass: '',
	verificationcode: '',
})

const rules = reactive({
	mobile: [
		{ required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
		{ 
			validator: (rule, value, callback) => {
				return valiteMobile(value)
			},
			message: '手机格式错误，请重新输入',
			trigger: ['blur', 'change']
		}
	],
	password: [
		{ required: true, message: '请输入密码', trigger: ['blur', 'change'] },
		{ min: 6, max: 18, message: '密码格式应为6-18位', trigger: ['blur', 'change'] },
	],
	confirmPass: [
		{ required: true, message: '请输入密码', trigger: ['blur', 'change'] },
		{ min: 6, max: 18, message: '密码格式应为6-18位', trigger: ['blur', 'change'] },
		{ 
			validator: (rule, value, callback) => {
				return value === ruleForm.password
			},
			messgae: '二次密码需与新密码一致，请重新输入！',
			trigger: ['blur', 'change']
		}
	],
	verificationcode: {
		validator: (rule, value, callback) => {
			if (value === '') return callback(new Error('验证码不能为空'))
			if (value.length < 6) return callback(new Error('验证码格式错误'))
			
			return true
		}
	}
})

// 发送验证码
const onSend = () => {
	form.value.validateField('phonenumber', err => {
		console.log(err)
	})
}

// 提交表单
const submit = () => {
	form.value.validate().then(res => {
		uni.showLoading({
			title: '正在修改中...',
			mask: true
		})
		Promise.try(async () => {
			return await SetUserPassword({
				mobile: ruleForm.mobile,
				password: ruleForm.password,
				verificationcode: ruleForm.verificationcode
			})
		}).then(res => {
			uni.setStorageSync('token', res.data.token)
			uni.setStorageSync('userInfo', {
				username: res.data.nickname
			})
			uni.showToast({
				title: '修改成功',
				duration: 5000,
				icon: 'success',
				success: () => {
					uni.navigateTo({
						url: '/pages/Home/index'
					})
				}
			})
		})
		uni.hideLoading()
	})
}
</script>

<style lang="scss" scoped>
	@import '@/static/scss/form.scss';
	
.container {
	padding: 25rpx 50rpx;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	.head {
		width: 100%;
		.logo {
			width: 200rpx;
			top: -60rpx;
			left: -50rpx;
			margin-right: -120rpx;
		}
		
		&_content {
			align-items: center;
		}
		
		&_title {
			color: #404040;
			font: {
				weight: bold;
				size: 36rpx;
			}
		}
		&_jg {
			font: {
				size: 36rpx;
			}
		}
		&_describe {
			top: 6rpx;
			font: {
				size: 42rpx;
				family: fangsong;
				weight: bold;
			}
		}
	}
	
	.descripe {
		color:#404040;
		font: {
			size: 27rpx;
		}
	}
	
	.uv-form {
		width: 100%;
		
		.sendCode {
			border: 1px solid rgb(214, 215, 217);
			border-radius: 16rpx;
			padding: 21.75rpx 24rpx;
			margin-left: 20rpx;
		}
		
		::v-deep {
			.group {
				.uv-checkbox {
					&:not(:last-child) {
						margin-right: 40rpx;
					}
				}
			}
			.uv-form-item__body__left__content__label {
				margin-bottom: 25rpx;
				font: {
					size: 27rpx;
				}
			}
			.uv-form-item {
				&:not(.code) {
					.uv-form-item__body {
						border: 1px solid rgb(214, 215, 217);
					}
				}
			}
			
			&.xy {
				.uv-form-item__body {
					padding: 0;
					border: none !important;
				}
			}
			
			&.code {
				.uv-form-item__body {
					padding: 0;
					.uv-input__content__prefix-icon {
						position: absolute;
					}
					.uv-input__content__field-wrapper {
						border-radius: 16rpx;
						padding: 18.12rpx 20rpx 18.12rpx 90rpx;
						border: 1px solid rgb(214, 215, 217);
					}
				}
			}
			
			.uv-form-item__body {
				border-radius: 16rpx;
				
				.uv-input__content__prefix-icon {
					padding: 0 20rpx;
					margin-right: 0;
				}
				
				.uv-input__content__subfix-icon {
					margin-left: 0;
				}
			}
		}
	}
	
	.handle {
		width: 100%;
		align-items: center;
		justify-content: space-between;
		
		&_btn {
			font: {
				size: 24rpx
			}
		}
	}
	
	.footer {
		width: 100%;
		.submit {
			width: 100%;
			
			::v-deep {
				.uv-button {
					height: 90rpx;
					color: #fff;
					background-color: #8065EA;
					border-radius: 20rpx;
				}
			}
		}
	}
}
</style>
